<template>
  <div ref="wrapper">
      <slot></slot>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
export default {
    props:{
        probeType:{
            type:Number,
            default:1
        },
        data:{
            type:Array,
            default:null
        },
        refreshDelay:{
            type:Number,
            default:20
        },
        click: {
            type: Boolean,
            default: true
        },
        listenScroll:{
            type:Boolean,
            default:false
        },
        pullup:{
            type:Boolean,
            default:false
        },
        beforeScroll:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
        setTimeout(() => {
            this._initScroll()
        }, 20)
    },
    methods:{
        _initScroll(){
            if (!this.$refs.wrapper) {
                return
            }
            this.scroll = new BScroll(this.$refs.wrapper,{
                probeType:this.probeType,
                click:this.click
            })
            if(this.listenScroll){
                this.scroll.on('scroll',(pos)=>{
                    this.$emit('scroll',pos)
                    console.log(123)
                })
            }
            if(this.pullup){
                this.scroll.on('scrollEnd',()=>{
                    if(this.scroll.y < this.scroll.maxScrollY+50){
                        this.$emit("scrollToEnd")
                    }
                })
            }
             if(this.beforeScroll){
                this.scroll.on('beforeScrollStart', () => {
                    this.$emit('beforeScroll')
                })
            }
        },
        refresh() {
            this.scroll && this.scroll.refresh()
        },
        scrollToElement(){
            this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments);
        },
        scrollTo(){
            this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments);
        }
    },
    watch:{
        data(){
            setTimeout(() => {
                    this.refresh()
                }, this.refreshDelay)
            }
    }
    
}
</script>

<style lang="stylus" scoped>

</style>
